<template>
	<view>

		<!-- 当设置tab-width,指定每个tab宽度时,则不使用flex布局,改用水平滑动 -->
		<me-tabs v-model="tabIndex" :tabs="tabs" :fixed="true" :tab-width="130"></me-tabs>
		<swiper :style="{height: height}" :current="tabIndex" @change="swiperChange">
			<swiper-item v-for="(tab,i) in tabs" :key="i">
				<mescroll-item ref="mescrollItem" :i="i" :index="tabIndex" :tabs="tabs"></mescroll-item>
			</swiper-item>
		</swiper>
		<view class="img_view_button" type="default" @click="view_img"><text class="img_view_button_text">分享</text><text
				class="img_view_button_text">海报</text></view>
		<l-painter ref="painter" isRenderImage custom-style="position: fixed; left: 200%;" :board="base"
			@success="success($event)" />

		<u-popup v-model="popup_show" mode='center' border-radius="14">
			<view style="background-color: #eee;">
				<u-image :src="path" mode="widthFix" width="700" height="auto"></u-image>
				<view>
					<u-button type="warning" @click="save_img">保存到相册</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import MeTabs from '@/components/me-tabs/me-tabs.vue';
	import MescrollItem from "./mescroll-swiper-item.vue";
	import {
		mapState
	} from 'vuex';
	import base from './base.js';
	export default {
		data() {
			return {
				popup_show: false,

				height: "400px", // 需要固定swiper的高度
				tabs: [{
					name: '推广人员',
					type: 0,
				}, {
					name: '推广账单',
					type: 1,
				}, {
					name: '推广员',
					type: 2,
				}
				],
				tabIndex: 0, // 当前tab的下标 


				isShowPopup: true,
				base: {},
				path: '',
			}
		},
		methods: {
			// 保存海报
			save_img() {
				uni.saveImageToPhotosAlbum({
					filePath: this.path,
					success : res => {
						uni.showToast({
							title: '已保存到相册',
							icon: 'success',
							duration: 1600 ,
							success: () => {
								this.popup_show = false ;
							} ,
						})
					}
				})
			},
			// 轮播菜单
			swiperChange(e) {
				this.tabIndex = e.detail.current
			},
			success(e) {
				console.log(e);
				this.path = e;
				uni.hideLoading() ;
				this.popup_show = true ;
			},
			view_img() {
				if (this.path.length == 0) {
					this.todo_canvas();
				} else {
					this.popup_show = true;
					// uni.previewImage({
					// 	current: 0,
					// 	urls: [this.path],
					// });

				}
			},
			// 构建海报
			todo_canvas() {
				this.base = base;
				this.$nextTick(() => {
					this.$u.api.saleInfo({}).then(res => {
						this.base.views[1].src = res.base_img;
						this.base.views[2].src = this.vuex_user.avatarUrl;
						this.base.views[3].text = this.vuex_user.nickname;
						this.base.views[4].src = res.img_url;
						// this.base.views[3].text = '';
						// this.base.views[5].text = "";
						this.$nextTick(() => {
							uni.showLoading({
								title: 'Loading...',
							});
							const painter = this.$refs.painter
							painter.render(this.base);
						})
					})
				})
			}
		},
		onLoad() {
			this.todo_canvas();
			// 需要固定swiper的高度
			this.height = uni.getSystemInfoSync().windowHeight + 'px';
		},
		computed: {
			...mapState({
				vuex_user: state => state.vuex_user,
			})
		},
		components: {
			MescrollItem,
			MeTabs
		},
	}
</script>

<style scoped lang="scss">
	.img_view_button_text {
		font-size: 30rpx;
		color: #FFFFFF;
		font-weight: 700;
	}

	.img_view_button {
		position: fixed;
		bottom: 100rpx;
		right: 30rpx;
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
		background-color: #FF9900;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
</style>
